<template>
	<div class="list list5 house">
		<yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
			<yd-list theme="5" slot="list">
				<yd-list-item class="my-yd-list-img" v-for="item, key in data" :key="key" @click.native="detailsrouter(item.houseId)">
					<div class="swiper-img" slot="img">
						<img slot="img" v-if="item.houseImgUrl.indexOf('?')==-1" :src="item.houseImgUrl+'?imageslim'">
						<img slot="img" v-else :src="item.houseImgUrl">
						<div class="sh-price">￥<span>{{item.prices}}</span>/晚</div>
						<!--收藏-->
						<div class="like-icon" @click.stop="selectSort($event,item.houseId)">
							<yd-icon name="like" v-if="item.isCollect==1" color="#FF685D"></yd-icon>
							<yd-icon name="like-outline" v-else color="#fff"></yd-icon>
						</div>
					</div>
					<yd-list-other slot="other">
						<div class="house5-introduce">
							<p class="swiper-text">{{item.title}}</p>
							<div class="swiper-item">
								<span v-if="item.houseRent==1">{{houseRent}} </span>
								<span v-if="item.roomRent==1">{{roomRent}} </span>
								<span v-if="item.bedRental==1">{{bedRental}} </span>
								<span>{{item.room}}室{{item.hall}}厅{{item.toilet}}卫</span>
								<span>宜居{{item.personNumber}}人</span>
								<span>{{item.centiare}}m²</span>
							</div>
							<div class="swiper-item-red">
								<!--<span>{{item.tags.replace(/,/g, " | ").}}</span>-->
								<span v-for="tagsitem,key in item.tags.split(',').slice(0,5)" v-if="tagsitem">{{tagsitem}}</span>
							</div>
						</div>
						<div class="house5-portrait">
							<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'" />
							<img v-else :src="item.imgUrl" />
						</div>
					</yd-list-other>
				</yd-list-item>
			</yd-list>
			<!-- 数据全部加载完毕显示 -->
			<span slot="doneTip">暂无更多房源信息</span>
			<!-- 加载中提示，不指定，将显示默认加载中图标 -->
			<img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />

		</yd-infinitescroll>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: 'ShortView',
		data() {
			return {
				page: 1,
				showid: '',
				userId: "",
				token: ""
			}
		},
		props: ["data"],
		mounted() {
			let that = this;
			if(sessionStorage.getItem("userinfo") != null) {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				that.userId = getHiss.id;
				that.token = getHiss.token;
			}
		},
		computed: {
			...mapGetters([
				'source',
				'version',
				'houseRent',
				'roomRent',
				'bedRental',
			])
		},
		methods: {
			selectSort(e, houseId) {
				if(e.target.className == "yd-icon-like-outline") {
					e.target.className = "yd-icon-like";
					e.target.style.color = "#FF685D"

					let ajaxSign = {
						"source": this.source,
						"token": this.token,
						"userId": this.userId.toString(),
						"houseId": houseId.toString(),
						"type": '1',
						"houseType": '2',
					}
					let ajaxData = api.getAES(ajaxSign);
					api.GetCollectSta(ajaxData)
						.then(res => {
							this.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
							if(res.sta == 203) {
								this.$router.push({
									path: "/login"
								})
							}
						})

				} else {

					e.target.className = "yd-icon-like-outline"
					e.target.style.color = "#fff"
					let ajaxSign = {
						"source": this.source,
						"token": this.token,
						"userId": this.userId.toString(),
						"houseId": houseId.toString(),
						"type": '2',
						"houseType": '2',
					}
					let ajaxData = api.getAES(ajaxSign);
					api.GetCollectSta(ajaxData)
						.then(res => {

							this.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
							if(res.sta == 203) {
								this.$router.push({
									path: "/login"
								})
							}
						})
				}
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;

				that.$router.push({
					path: '/shortDetails',
					query: {
						houseId: houseId
					}
				})
			},
			loadList() {
				var that = this;
				/* 单次请求数据完毕 */

				that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
				that.page++;
				that.$emit('getlongHouseList', that.page);

			}
		}
	}
</script>

<style>
	@import url("../assets/css/listfive.css");
</style>